<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 200px;
            height: 150px;
            padding: 20px;
            border-radius: 25px;
            margin: 15px 15px;
        }
        .container1 {
            background: red;
        }
        .container2 {
            border: 2px solid green;
        }
        .container3 {
            background: url(img/EURO.png);
            background-position: center;
            background-repeat: no-repeat;
        }
        /* 圆角 */
        .container4 {
            background: limegreen;
            border-radius: 15px 50px 30px 5px;
        }
        .container5 {
            background: limegreen;
            border-radius: 15px 50px 30px;
        }
        .container6 {
            background: limegreen;
            border-radius: 15px 50px;
        }
        /* 椭圆 */
        .container7 {
            background: rgb(179, 179, 81);
            border-radius: 50px/15px;
        }
        .container8 {
            background: rgb(179, 179, 81);
            border-radius: 15px/50px;
        }
        .container9 {
            background: rgb(179, 179, 81);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container1"></div>
    <div class="container2"></div>
    <div class="container3"></div>
    <div class="container4"></div>
    <div class="container5"></div>
    <div class="container6"></div>
    <div class="container7"></div>
    <div class="container8"></div>
    <div class="container9"></div>
</body>
</html>